<!-- 魔方 -->
<template>
  <div class="draggable-rubik-s-cube">
    <component :is="templateId" :list="list" :len="len" preview />
  </div>
</template>

<script>
  import { CubeTemplates } from '@/components/Draggable/Constants'
  export default {
    name: 'DraggableRubikSCube',
    props: {
      templateId: {
        type: String,
        default: 'RowTwoCols'
      },
      imageGutter: {
        type: Number,
        default: 0
      },
      pageGutter: {
        type: Number,
        default: 0
      },
      list: {
        type: Array,
        default: () => []
      }
    },
    components: {
      'RowTwoCols': () => import('@/components/Draggable/template/RowTwoCols'),
      'RowThreeCols': () => import('@/components/Draggable/template/RowThreeCols'),
      'RowFourCols': () => import('@/components/Draggable/template/RowFourCols'),
      'LeftTwoRight': () => import('@/components/Draggable/template/LeftTwoRight'),
      'LeftThreeRight': () => import('@/components/Draggable/template/LeftThreeRight'),
      'TwoLeftTwoRight': () => import('@/components/Draggable/template/TwoLeftTwoRight'),
      'UpTwoDown': () => import('@/components/Draggable/template/UpTwoDown')
    },
    computed: {
      len () {
        const { templateId, CubeTemplates } = this
        const template = CubeTemplates.find(item => item.value === templateId)
        return template ? template.len : 0
      }
    },
    data () {
      return {
        CubeTemplates
      }
    }
  }
</script>

<style lang="less" scoped>
  .draggable-rubik-s-cube {
    width: 100%;
  }
</style>
